<template>
  <div class="application_management">
    <div class="application_management_left container">
      <editTree @select-tree-node="selectTree" @update-detail="updateDetail" />
    </div>
    <div class="application_management_right container">
      <a-spin :spinning="appLoading" v-if="list.length > 0">
        <BasicTabs :tabsList="tabsList" @handle-change="handleChange" :tabsValue="activeKey" />
        <template v-if="activeKey == 'applicationDetail'">
          <applicationDetail :key="time" @update-loading="updateLoading" />
        </template>
        <template v-if="activeKey == 'environmentManagement'">
          <environmentManagement :key="time" @update-loading="updateLoading" />
        </template>
        <template v-if="activeKey == 'componentDetail'">
          <componentDetail :key="time" @update-loading="updateLoading" />
        </template>
        <template v-if="activeKey == 'changeManagement'">
          <changeManagement :key="time" @update-loading="updateLoading" />
        </template>
      </a-spin>
      <BasicEmpty
        v-else
        style="display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 64px)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import editTree from './components/editTree.vue';
import applicationDetail from './components/application/applicationDetail.vue';
import environmentManagement from './components/application/environmentManagement.vue';
import componentDetail from './components/modules/componentDetail.vue';
import changeManagement from './components/changeManagement/index.vue';
import { TypeEnum } from '@/enums/pipelineEnum';
import { useApplicationStore } from '@/store/modules/app';
const counterStore = useApplicationStore();
// 作为 action 的 increment 可以直接解构
const { setAppData, setComponentData } = counterStore;
const tabsList = ref([
  { name: '应用详情', key: 'applicationDetail' },
  { name: '环境管理', key: 'environmentManagement' },
]);
const activeKey: any = ref('applicationDetail');

const handleChange = (key: [string, number]) => {
  appLoading.value = true;
  activeKey.value = key;
  time.value = new Date().getTime();
};

// 选中节点类型

const appLoading = ref(false);
const time = ref(0);
const selectTree = (node: any) => {
  if (!node) return;

  //应用详情
  if (node._type == TypeEnum.app) {
    setAppData(node);
    tabsList.value = [
      { name: '应用详情', key: 'applicationDetail' },
      { name: '环境管理', key: 'environmentManagement' },
    ];
    activeKey.value = 'applicationDetail';
  }

  //组件详情
  if (node._type == TypeEnum.component) {
    setComponentData(node);
    tabsList.value = [
      { name: '组件详情', key: 'componentDetail' },
      { name: '变更管理', key: 'changeManagement' },
    ];
    activeKey.value = 'componentDetail';
  }

  time.value = new Date().getTime();
  appLoading.value = true;
};

// 更新详情
const list = ref([]);
const updateDetail = (data: any) => {
  list.value = data;
};

const updateLoading = (loading: boolean) => {
  setTimeout(() => {
    appLoading.value = loading;
  }, 500);
};
</script>

<style scoped lang="less">
.application_management {
  display: flex;
  width: 100%;
  background-color: #fff;
  height: 100%;
  .application_management_left {
    width: 300px;
    min-width: 300px;
    height: calc(100vh - 145px);
    overflow-y: auto;
  }
  .application_management_right {
    border-left: 1px solid #e8e8e8;
    flex: 1;
    padding-top: 0;
    overflow: auto;
    position: relative;
  }
}
</style>
